import { Box, MenuItem, Typography } from '@mui/material';
import React, { useEffect, useState } from 'react';
import { useGetThemeStateStore } from 'stores/theme';

import { useStyles } from '../dialogs/UIs/styled-mui-dialog';
import { GfsInputSelectBase } from '../forms';

export interface Option {
    value: string;
    label: string;
}

interface Props {
    sortFields: Option[];
    onClickApply: Function;
    initValue?: string;
}

export const SortField = (props: Props) => {
    const style = useStyles();
    const { sortFields, initValue, onClickApply } = props;
    const [value, setValue] = useState<string>('');
    const {mode,isLight,setMode,color1,bgColor,bgColor1,bgColor0,txtColor,txtColor3} = useGetThemeStateStore();

    useEffect(() => {
        if (initValue) {
            setValue(initValue);
        }
    }, [initValue]);

    const onChange = (event) => {
        const value = event.target.value;
        setValue(value);
        onClickApply(value);
    };

    return (
        <GfsInputSelectBase
            value={value}
            onChange={onChange}
            sx={{
                minWidth: '150px',
                background:bgColor+' !important',
                '& .MuiInputBase-input':{
                    background:bgColor+' !important',
                    color:txtColor+' !important',

                },
                '& .MuiSvgIcon-root':{
                    fill:txtColor+' !important',
                },
                '& .MuiSelect-select': {
                    height: '40px',
                    padding: '12px 30px 2px 15px',

                }
            }}
            displayEmpty
            renderValue={
                value !== ''
                    ? (cur) => (
                          <Box display={'flex'} gap={'5px'} alignItems={'center'} sx={{
                              fontFamily: 'Rubik !important',
                              fontWeight: '400 !important',
                              fontSize: '12px !important',
                              lineHeight: '130% !important',
                              color:txtColor+' !important',
                          }}>
                              <span style={{color:txtColor+' !important',}}>Sort by</span>
                              <Box
                                  component="img"
                                  sx={{ height: 12, width: 10.5 }}
                                  alt="Icon"
                                  src={'/sort.svg'}
                              />
                              <span style={{color:txtColor+' !important',}}>:</span>
                              <span style={{color:txtColor+' !important',}}>
                                  {sortFields?.find(({ value }) => cur === value)?.label}
                              </span>
                          </Box>
                      )
                    : () => (
                          <Box display={'flex'} gap={'5px'} alignItems={'center'}>
                              <Typography>Sort by</Typography>
                              <Box
                                  component="img"
                                  sx={{ height: 13, width: 13 }}
                                  alt="Icon"
                                  src={'/sort.svg'}
                              />
                          </Box>
                      )
            }
        >
            {sortFields.map((option: Option) => (
                <MenuItem key={option.value} value={option.value} className={style.menuItem}>
                    {option.label}
                </MenuItem>
            ))}
        </GfsInputSelectBase>
    );
};
